<template>
    <div>
        <ul class="qqfix">
            <li>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=372302889&site=qq&menu=yes" class="li-item-box">
                    <a-icon type="qq"/>
                    <div>客服1</div>
                </a>

            </li>
            <li>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=372302889&site=qq&menu=yes" class="li-item-box">
                    <a-icon type="qq"/>
                    <div>客服2</div>
                </a>

            </li>
            <li>
                <a href="http://wpa.qq.com/msgrd?v=3&uin=372302889&site=qq&menu=yes" class="li-item-box">
                    <a-icon type="qq"/>
                    <div>技术支持</div>
                </a>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "QQ"
    }
</script>

<style scoped lang="less">
    .qqfix {
        list-style: none;
        position: fixed;
        bottom: 35vh;
        right: 20px;
        z-index: 999;
        li:first-child{ border-radius: 5px 5px 0 0;}
        li{

            color: #009688;
            text-align: center;
            background-color: #e6f7ff;
            border-top: 1px solid #e8e8e8;
            width: 100%;
        }
        li:hover{
            background-color: #00cf8c;
            i{
                color: white;
            }

        }
        .li-item-box{
            display: block;
            padding: 10px 7px 4px 7px;
            text-decoration: none;
            i{color: #009688;
                font-size: 35px;
            }

            div{color: #009688;
                width: 56px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

</style>